<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			padding: 0;
			margin: 0;
			list-style: none;
		}
		body{
			background: black;
			/*height: 2000px;*/
		}
		.view{
			position: relative;
			margin: 150px auto;
			width: 200px;
			height: 200px;
			perspective: 1000px;
			text-align: center;
			perspective-origin: 10% 10%;
		}
		li{
			position: absolute;
			width: 200px;
			height: 200px;
			border: 1px solid white;
			border-radius: 100px;
		}
		/*圆形旋转*/
		@keyframes circle1{
			100%{
				transform: rotateY(30deg);
			}
		}
		#circle1{
			animation: circle1 1s linear 1s forwards;
		}
		@keyframes circle2{
			100%{
				transform: rotateY(60deg);
			}
		}
		#circle2{
			animation: circle2 1s linear 2s forwards;
		}
		@keyframes circle3{
			100%{
				transform: rotateY(90deg);
			}
		}
		#circle3{
			animation: circle3 1s linear 3s forwards;
		}
		@keyframes circle4{
			100%{
				transform: rotateY(120deg);
			}
		}
		#circle4{
			animation: circle4 1s linear 4s forwards;
		}
		@keyframes circle5{
			100%{
				transform: rotateY(150deg);
			}
		}
		#circle5{
			animation: circle5 1s linear 5s forwards;
		}
		@keyframes circle6{
			100%{
				transform: rotateY(180deg);
			}
		}
		#circle6{
			animation: circle6 1s linear 6s forwards;
		}
		/*球体旋转*/
		@keyframes round{
			100%{
				transform: rotateY(90deg);
			}
		}
		#ball{
			animation: round 1s linear 7s forwards infinite;
			transform-style: preserve-3d;
		}
	</style>
</head>
<body>
	<div class="view">
		<ul id="ball">
			<li class="circle" id="circle1"></li>
			<li class="circle" id="circle2"></li>
			<li class="circle" id="circle3"></li>
			<li class="circle" id="circle4"></li>
			<li class="circle" id="circle5"></li>
			<li class="circle" id="circle6"></li>
		</ul>
	</div>
</body>
</html>